<template>
	<view class="main">
		<topCommonTitleBar class="topBar" arrow="black" titleColor="#333333" :isBackClick="false" @backClick="goBack">
		</topCommonTitleBar>
		<view style="height: 160rpx"></view>
		<view class="top" style="padding-top: 52rpx">
			<view class="title">输入验证码</view>
			<view>验证码已发送至{{ form.mobile }}</view>
		</view>
		<view class="code_info">
			<view class="code_error" v-if="codeColor == '#ff0000'">验证码输入错误</view>
			<!-- input输入框 -->
			<input class="input" adjust-position="false" auto-blur="true" @blur="blur" @input="codeNum" :focus="focus"
				value="form.captcha" v-model="form.captcha" type="number" maxlength="4" />
			<view class="code_input">
				<view class="code_line" v-for="(item, index) in 4" :key="index" @click="codeFocus(index)" :style="index == form.captcha.length
					? 'border-bottom: 4rpx solid #3c9cff;width: 89rpx;height: 89rpx;line-height: 80rpx;'
					: 'color: ' + codeColor + ';' + 'border-bottom: 2rpx solid' + codeColor
					">
					{{ (form.captcha[index] && form.captcha[index]) || '' }}
				</view>
			</view>
		</view>
		<view class="get_code">
			<span v-if="countDown == 60" @click="anewSend()" style="color: #3c9cff">重新发送</span>
			<span v-else>{{ countDown }}s后可重新发送</span>
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/login/checkCode"></script>

<style lang="scss">
.main {
	padding: 0 60rpx;
	height: 100%;
	background-color: #ffffff;

	.topBar {
		position: fixed;
		width: 750rpx;
		left: 0;
		top: 0;
	}

	.title {
		height: 80rpx;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 600rpx;
		color: #06121e;
	}

	.code_info {
		margin-top: 120rpx;

		.code_error {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: normal;
			color: #ff0000;
		}
	}

	.input {
		position: fixed;
		left: -100rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.get_code {
		margin-top: 51rpx;
		font-size: 26rpx;
		color: #999;
	}

	.code_input {
		margin: auto;
		display: flex;
		justify-content: space-between;

		.code_line {
			margin-top: 5rpx;
			margin-left: 15rpx;
			width: 86rpx;
			height: 86rpx;
			line-height: 86rpx;
			font-size: 60rpx;
			font-weight: bold;
			color: #313131;
			text-align: center;

			&:first-child {
				margin-left: 0rpx;
			}
		}
	}
}
</style>
